﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Celestial Home - Extracting every detail of your dream</title>
        <link rel="Stylesheet" type="text/css" href="css/master.css" />
        <style type="text/css">
            fieldset
            {
                border:solid 2px;
                background-image:url("./images/background.png");
                background-repeat:repeat;
                position:relative;
            }
            table td
            {	
                padding:4px;
                border-bottom:solid 2px #044476;
            }
            .trHeader
            {
                font-weight:bold;
                color:White;
                background-image:url("../images/sec_header.png");
                background-repeat:repeat-x;
            }
        </style>
        <link rel="Stylesheet" type="text/css" href="css/login.css" />

        <script type="text/javascript" src="javascripts/helpers.js"></script>
        <script type="text/javascript" src="javascripts/login.js"></script>
        <script type="text/javascript" src="javascripts/shoppingcart.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                if (!checkLogin()) {
                    document.getElementById("divMain").innerHTML = "<div id=\"divError\"></div>";
                    document.getElementById("divError").style.display = "block";
                    document.getElementById("divError").innerHTML = "You have to be logged in to checkout! Please login <a href=\"login.html\">here</a>. :)";
                }
            }
        </script>
    </head>
    <body>

        <div id="divTitle">
            <div id="divCustMenu">
                <img src="images/user.png" alt="user" /><a id="aLogin" href="login.html">Login</a> |
                <img src="images/profile.png" alt="profile" /><a id="aProfile" href="particulars.html">My Profile</a> |
                <img src="images/cart.png" alt="cart" /><a href="construct.html">My Cart</a> |
                <img src="images/checkout.png" alt="checkout" /><a href="construct.html">Checkout</a>
            </div><!--ends divCustmenu-->
            <div id="divWelcome">Welcome</div>
        </div><!--ends divTitle-->

        <!-- Navigation Bar - common for all pages -->
        <div id="divNavBar">
            <ul id="ulNavBar">
                <li><img src="images/home.png" alt="home"/><a href="index.html"> Home</a></li>

                <li><img src="images/briefcase.png" alt="home"/><a href="about.html"> About Us</a></li>

                <li><img src="images/chair.png" alt="home"/><a href="construct.html"> Products</a>
                    <ul>
                        <li><a href="construct.html">Bed Room</a>
                            <ul>
                                <li><a href="construct.html">Beds</a></li>
        <li><a href="construct.html">Cupboards</a></li>
                            </ul>
                        </li>
                        <li><a href="construct.html">Dining Room</a>
                            <ul>
                                <li><a href="construct.html">Chairs</a></li>
                                <li><a href="construct.html">Dining Tables</a></li>
                                <li><a href="construct.html">Dining Table Sets</a></li>
                            </ul>
                        </li>

                        <li><a href="construct.html">Living Room</a>
                            <ul>
                                <li><a href="construct.html">Coffee Tables</a></li>
                                <li><a href="construct.html">Sofa</a></li>
                                <li><a href="construct.html">Sofa Sets</a></li>
                                <li><a href="construct.html">TV Cabinets</a></li>
                            </ul>
                        </li>
                        <li><a href="construct.html">Study Room</a>
                            <ul>
                                <li><a href="construct.html">Desks</a></li>
                                <li><a href="construct.html">Book Shelves</a></li>
                            </ul>
                        </li>
                    </ul>
                </li> <!--ends Products menu-->

                <li><img src="images/design.png" alt="home"/><a href="construct.html"> Design</a>
                    <ul>
    <li><a href="construct.html">Cupboard</a></li>
                        <li><a href="construct.html">Home Theatre</a></li>
                    </ul>
                </li> <!--ends design menu-->
                <li><img src="images/earth.png" alt="home"/><a href="construct.html"> Support</a>
                    <ul>
                        <li ><a href="contact.html">Contact Us</a></li>
                        <li><a href="construct.html">Track Your Order</a></li>
    <li><a href="construct.html">Your Account</a></li>
                    </ul>
                </li> <!--ends support menu-->

<li id="lstManager"><img src="images/manager_tasks.png" alt="manager tasks" /><a href="customers.html"> Manager Tasks</a></li>

            </ul>  <!--ends navigation menu-->
        </div> <!--ends navigation division-->

        <div id="divMain">
            <p>&gt;Edit Cart &gt; Billing and Shopping &gt; <u>Place Order</u></p>
            <fieldset id="divInvoice">
                <a href="javascript:;" onmousedown="toggleDiv('mydiv1');">+ [Customer Particulars]</a>&nbsp;<a id="mydivEdit1" href="billing.html" style="display:none">[Edit]</a><br/>
                <div id="mydiv1" style="display:none">
                    <table width="331" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="80"><label>First Name:</label></td>
                            <td width="241"><label><script type="text/javascript">
                                var customerData = getCookie('customerData');
                                customerData = customerData.split("///");
                                document.writeln(customerData[0]);</script></label></td>
                        </tr>
                        <tr>
                            <td>Last Name:</td>
                            <td><script type="text/javascript">document.writeln(customerData[1]);</script></td>
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td><script type="text/javascript">document.writeln(customerData[2]);</script></td>
                        </tr>
                    </table>
                </div>
                <br/>

                <a href="javascript:;" onmousedown="toggleDiv('mydiv3');">+ [Billing Details]</a>&nbsp;<a id="mydivEdit3" href="billing.html" style="display:none">[Edit]</a><br/>
                <div id="mydiv3" style="display:none">
                    <table width="331" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="104">Credit Card No:</td>
                            <td width="217"><label><script type="text/javascript">document.writeln(customerData[3].substring(0,4) + "************");</script></label></td>
                        </tr>
                        <tr>
                            <td>Card Type:</td>
                            <td><label><script type="text/javascript">
                                if (customerData[4] == 1) {
                                    document.writeln("American Express");
                                }
                                else if (customerData[4] == 2) {
                                    document.writeln("MasterCard");
                                }
                                else {
                                    document.writeln("Visa");
                                }
                                    </script></label></td>
                        </tr>
                        <tr>
                            <td>CV Code:</td>
                            <td><script type="text/javascript">document.writeln(customerData[6]);</script></td>
                        </tr>
                        <tr>
                            <td>Card Holder Name: </td>
                            <td><script type="text/javascript">document.writeln(customerData[5]);</script></td>
                        </tr>
                        <tr>
                            <td width="104">Country:</td>
                            <td width="217"><label><script type="text/javascript">
                                if (customerData[8] == "AU") {
                                    document.writeln("Australia");
                                }
                                else if (customerData[8] == "CN") {
                                    document.writeln("China");
                                }
                                else if (customerData[8] == "HK") {
                                    document.writeln("Hong Kong");
                                }
                                else if (customerData[8] == "IN") {
                                    document.writeln("India");
                                }
                                else if (customerData[8] == "JP") {
                                    document.writeln("Japan");
                                }
                                else if (customerData[8] == "SG") {
                                    document.writeln("Singapore");
                                }
                                else {
                                    document.writeln("Malaysia");
                                }
                                    </script></label></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><script type="text/javascript">document.writeln(customerData[9]);</script></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><script type="text/javascript">document.writeln(customerData[10]);</script></td>
                        </tr>
                        <tr>
                            <td>Address Line 1:</td>
                            <td><script type="text/javascript">document.writeln(customerData[11]);</script></td>
                        </tr>
                        <tr>
                            <td>Address Line 2:</td>
                            <td><script type="text/javascript">document.writeln(customerData[12]);</script></td>
                        </tr>
                        <tr>
                            <td>Postal Code:</td>
                            <td><script type="text/javascript">document.writeln(customerData[13]);</script></td>
                        </tr>
                    </table>
                </div>
                <br/>

                <a href="javascript:;" onmousedown="toggleDiv('mydiv2');">+ [Shipping Details]</a>&nbsp;<a id="mydivEdit2" href="billing.html" style="display:none">[Edit]</a><br/>
                <div id="mydiv2" style="display:none">
                    <table width="331" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="104">Country:</td>
                            <td width="217"><label><script type="text/javascript">
                                if (customerData[14] == "AU") {
                                    document.writeln("Australia");
                                }
                                else if (customerData[14] == "CN") {
                                    document.writeln("China");
                                }
                                else if (customerData[14] == "HK") {
                                    document.writeln("Hong Kong");
                                }
                                else if (customerData[14] == "IN") {
                                    document.writeln("India");
                                }
                                else if (customerData[14] == "JP") {
                                    document.writeln("Japan");
                                }
                                else if (customerData[14] == "SG") {
                                    document.writeln("Singapore");
                                }
                                else {
                                    document.writeln("Malaysia");
                                }
                                    </script></label></td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td><script type="text/javascript">document.writeln(customerData[15]);</script></td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td><script type="text/javascript">document.writeln(customerData[16]);</script></td>
                        </tr>
                        <tr>
                            <td>Address Line 1:</td>
                            <td><script type="text/javascript">document.writeln(customerData[17]);</script></td>
                        </tr>
                        <tr>
                            <td>Address Line 2:</td>
                            <td><script type="text/javascript">document.writeln(customerData[18]);</script></td>
                        </tr>
                        <tr>
                            <td>Postal Code:</td>
                            <td><script type="text/javascript">document.writeln(customerData[19]);</script></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>Delivery Date: </td>
                            <td><label><script type="text/javascript">document.writeln(customerData[7]);</script></label></td>
                        </tr>
                    </table>
                </div>
                <br/>

                <a href="javascript:;" onmousedown="toggleDiv('mydiv4');">+ [Order Details]</a>&nbsp;<a id="mydivEdit4" href="cart.html">[Edit]</a><br/>
                    <div id="mydiv4"><table cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="100">Product</td>
                                <td width="50">Qty</td>
                                <td width="70">Unit Price </td>
                                <td>Extended Price </td>
                            </tr>
                            <script type="text/javascript">
                                var products = getCookie('products');
                                products = products.split('/');

                                for (var i = 0; i < products.length; i ++) {
                                    var productdata = products[i].split(':');
                                    document.writeln("<tr>");
                                    document.writeln('<td height="23">' + productdata[1] + '</td>');
                                    document.writeln('<td>' + productdata[2] + '</td>');
                                    document.writeln('<td>$' + productdata[3] + '</td>');
                                    document.writeln('<td>$' + productdata[3] * productdata[2] + '</td>');
                                    document.writeln('</tr>');
                                }
                            </script>
                            <tr>
                                <td colspan="3" height="23">Total Price</td>
                                <td><script type="text/javascript"> document.writeln("$" + calculateTotalPrice(products));</script></td>
                            </tr>
                        </table>
                    </div>
                    <br/>
                    <a href="javascript: confirmOrder()">Confirm Order</a>

                    <br/>
            </fieldset>
        </div> <!-- ends divMain -->

        <div id="divFooter">
            <div id="divFooterLeft">&#169 Copyright 2010 Celestial Home</div>
            <div id="divFooterRight"> Site Design by <a href="#" id="aDreamArchitect"><img src="images/dream.png" alt="Dream Architect"/></a></div>
            <div id="divFooterCenter"><img src="images/visa.gif" alt=""/><img src="images/paypal.png" alt="" /></div>
        </div><!--ends divFooter-->

    </body>
</html>
